<template>
  <div class="home">
    <!-- 搜索和类别选择区域 -->
    <v-row class="mb-6">
      <v-col cols="12" sm="8" md="6" lg="4">
        <v-text-field
          v-model="searchQuery"
          label="搜索电影"
          append-icon="mdi-magnify"
          clearable
          outlined
          dense
          dark
          hide-details
          color="primary"
          background-color="rgba(255, 255, 255, 0.05)"
          @keyup.enter="handleSearch"
          @click:append="handleSearch"
          :loading="searching"
        ></v-text-field>
      </v-col>
      <v-col cols="12" sm="4" md="6" lg="8" class="d-flex align-center">
        <v-chip-group
          v-model="selectedCategory"
          active-class="primary--text"
          mandatory
          show-arrows
        >
          <v-chip
            v-for="category in categories"
            :key="category.value"
            :value="category.value"
            outlined
            dark
            @click="handleCategoryChange(category.value)"
          >
            {{ category.text }}
          </v-chip>
        </v-chip-group>
      </v-col>
    </v-row>

    <!-- 搜索结果 -->
    <template v-if="searchResults.length > 0">
    <div class="white--text font-weight-bold text-h5 d-flex justify-start my-6">
        搜索结果
    </div>
      <v-row>
        <v-col 
          cols="12" lg="2.4" md="4" sm="6" xs="12"
          v-for="(item, index) in searchResults" 
          :key="'search-'+index"
          class="movie-col"
        >
          <movie-card :movie="item"/>
        </v-col>
      </v-row>
    </template>

    <!-- 分类Top 10展示 -->
    <template v-if="!searchResults.length">
      <div class="white--text font-weight-bold text-h5 d-flex justify-space-between align-center my-6">
        <span>{{ selectedCategory === '最新' ? '2025年' : '' }}{{ currentCategoryText }}评分最高的作品 (Top 10)</span>
        <v-progress-circular
          v-if="loading"
          indeterminate
          color="primary"
          size="24"
        ></v-progress-circular>
    </div>
    <v-row>
        <v-col 
          cols="12" lg="2.4" md="4" sm="6" xs="12"
          v-for="(item, index) in currentCategoryMovies" 
          :key="'category-'+index"
          class="movie-col"
        >
        <movie-card :movie="item"/>
      </v-col>
    </v-row>
    </template>
  </div>
</template>

<script>
import MovieCard from "../components/MovieCard";
import {getHot, getHotAnime, get, getTopByGenre} from "../api/movie";

export default {
  components: { MovieCard },
  name: "Home",
  data: () => ({
    movies: [],
    animes: [],
    searchQuery: '',
    searchResults: [],
    searching: false,
    loading: false,
    selectedCategory: '最新',
    currentCategoryMovies: [],
    categories: [
      { text: '最新', value: '最新' },
      { text: '全部', value: 'all' },
      { text: '剧情', value: '剧情' },
      { text: '喜剧', value: '喜剧' },
      { text: '动作', value: '动作' },
      { text: '爱情', value: '爱情' },
      { text: '科幻', value: '科幻' },
      { text: '冒险', value: '冒险' },
      { text: '动画', value: '动画' },
      { text: '悬疑', value: '悬疑' },
      { text: '惊悚', value: '惊悚' },
      { text: '犯罪', value: '犯罪' },
      { text: '奇幻', value: '奇幻' },
      { text: '战争', value: '战争' },
      { text: '历史', value: '历史' }
    ]
  }),
  computed: {
    currentCategoryText() {
      const category = this.categories.find(c => c.value === this.selectedCategory);
      return category ? category.text : '全部';
    }
  },
  methods: {
    async handleSearch() {
      if (!this.searchQuery.trim()) return;
      
      this.searching = true;
      try {
        const res = await get({ keyword: this.searchQuery });
        this.searchResults = res.data.data.movies || [];
      } catch (error) {
        console.error('搜索失败:', error);
      } finally {
        this.searching = false;
      }
    },
    async handleCategoryChange(category) {
      this.searchResults = []; // 清空搜索结果
      this.loading = true;
      try {
        // 使用新的API获取指定类别的Top 10电影
        const res = await getTopByGenre(category === 'all' ? '' : category);
        this.currentCategoryMovies = res.data.data || [];
      } catch (error) {
        console.error('获取分类数据失败:', error);
        this.currentCategoryMovies = [];
      } finally {
        this.loading = false;
      }
    }
  },
  async mounted() {
    this.loading = true;
    try {
      // 初始加载最新分类的电影
      const [topMovies, hotAnimes] = await Promise.all([
        getTopByGenre('最新'),
        getHotAnime()
      ]);
      
      this.currentCategoryMovies = topMovies.data.data || [];
      this.animes = hotAnimes.data.data || [];
    } catch (error) {
      console.error('获取数据失败:', error);
    } finally {
      this.loading = false;
    }
  }
}
</script>

<style scoped>
.home {
  padding-bottom: 40px;
}

/* 在大屏幕上强制每行显示5个 */
@media (min-width: 1264px) {
  .movie-col {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}
</style>
